<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-17 15:37:56
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-26 13:31:58
 * @FilePath: \appGly\pages\home\home.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view>
    <!-- http://img.gpsserver.cn:20080/wxhtml/img/logintype4/uUser.jpg -->
    <u--image
      :showLoading="true"
      :src="src"
      width="750rpx"
      height="200rpx"
      @click="click"
    ></u--image>
    <view class="list">
      <view
        class="item"
        v-for="(item, key) in list"
        :key="key"
        @click="itemtap(item)"
      >
        <view class="label">
          {{ item.label }}
        </view>
        <view class="label" v-if="item.value">
          {{ item.value }}
        </view>
        <view v-else class="icon">
          <u-icon name="arrow-right" size="20" color="#969696"></u-icon>
        </view>
      </view>
    </view>
    <ztabbar></ztabbar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        src: "http://img.gpsserver.cn:20080/wxhtml/img/logintype4/uUser.jpg",
        list: [
          {
            icon: "iconleft_menu_charge",
            label: "充电记录",
            url: `/pages/GetRfCD/GetRfCD`,
          },
          {
            icon: "icongerenzhongxin-xuanzhongxin",
            label: "用户管理",
            url: `/pages/USearch/USearch`,
          },
        ],
      };
    },

    methods: {
      itemtap(item) {
        if (item.url) {
          this.$z.gopage(item.url);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .list {
    .item {
      height: 104rpx;
      display: flex;
      background-color: #fff;
      align-items: center;
      position: relative;
      .label {
        width: 260rpx;
        padding-left: 30rpx;
      }
      .icon {
        position: absolute;
        right: 30rpx;
      }
      &::after {
        content: "";
        height: 2rpx;
        position: absolute;
        left: 30rpx;
        bottom: 0;
        right: 0;
        background-color: #cfcfcf;
        transform: scaleY(0.5);
      }
      &.noafter {
        &::after {
          display: none;
        }
      }
    }
  }
</style>
